<template>
  <!-- 规则定义子页面 数据来源-->
  <div>
    <el-form
      :model="addRuleSource"
      ref="addRuleSource"
      label-position="left"
      :rules="addRuleSourceRules"
    >
      <el-row>
        <el-col :span="24">
          <h3 style="line-height: 40px; font-weight: bolder; font-size: 13px">
            操作目标
          </h3>
        </el-col>
        <el-col :span="7">
          <el-form-item label="业务表:" prop="tableNameEn" label-width="80px">
            <el-select
              :disabled="operateType == '3'"
              v-model="addRuleSource.tableNameEn"
              placeholder="请选择业务表"
              style="width: 100%"
              @change="tableNameEnChanges"
            >
              <el-option
                v-for="item in pubPhysicaltableList"
                :key="item.tableNameEn"
                :label="item.tableNameCn + '--' + item.tableNameEn"
                :value="item.tableNameEn"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="7">
          <el-form-item label="业务字段:" prop="columnEn" label-width="90px">
            <el-select
              :disabled="operateType == '3'"
              v-model="addRuleSource.columnEn"
              placeholder="请选择业务字段"
              style="width: 100%"
              @change="pubPhysicalcolumnIdChanges"
            >
              <el-option
                v-for="item in columnList"
                :key="item.columnEn"
                :label="item.columnCn + '--' + item.columnEn"
                :value="item.columnEn"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="8">
          <el-form-item label="费用类别:" prop="feeType" label-width="90px">
            <el-select
              v-model="addRuleSource.feeType"
              :disabled="operateType == '3'"
              placeholder="请选择规则类型"
              style="width: 100%"
            >
              <el-option
                v-for="item in feeTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3 style="line-height: 40px; font-weight: bolder; font-size: 13px">
            筛选条件
          </h3>
        </el-col>
      </el-row>
      <el-row style="font-size: 13px; margin-bottom: 10px">
        <el-col :span="7">
          <p>维度</p>
        </el-col>
        <el-col :span="11">
          <p>值</p>
        </el-col>

        <el-col :span="6">
          <p>描述</p>
        </el-col>
      </el-row>
      <div
        style="
          height: 180px;
          overflow: auto;
          overflow-x: hidden;
          margin-bottom: 20px;
        "
      >
        <el-row
          v-for="(item, index) in selectConditionList"
          :key="index"
          style="margin-top: 10px"
        >
          <el-col :span="7">
            <span style="line-height: 25px">{{ item.columnCn }}</span>
          </el-col>
          <el-col :span="5">
            <el-select
              :disabled="operateType == '3'"
              v-model="item.filterValue"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="itval in item.filterValueList"
                :key="itval.filterValue"
                :label="itval.filterName"
                :value="itval.filterValue"
               
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button
              :disabled="operateType == '3'"
              style="min-width: 60px; min-height: 26px"
              @click.native="toSelectTab(item, index)"
              >选择</el-button
            >
          </el-col>
          <el-col :span="6">
            <span v-if="item.selectionFlag != '1'" style="line-height: 25px">{{ item.filterValue }}</span>
            <span v-if="item.selectionFlag == '1'" style="line-height: 25px">{{ item.filterValue.split('@@@')[0] }}</span>
            <!-- <span style="line-height: 25px">{{ item.filterName }}</span> -->
          </el-col>
        </el-row>
      </div>

      <!-- ******************过滤器********************* -->
      <el-row>
        <el-col :span="24">
          <h3 style="line-height: 40px; font-weight: bolder; font-size: 13px">
            过滤器
          </h3>
        </el-col>
        <el-col :span="24">
          <el-form :model="addRuleSource" ref="addRuleSource">
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="过滤器类型："
                  label-width="120px"
                  prop="filterMethods"
                >
                  <el-radio-group
                    v-model="addRuleSource.filterMethods"
                    @change="filterTypeChange"
                    :disabled="operateType == '3'"
                  >
                    <el-radio :label="'0'">不使用</el-radio>
                    <el-radio :label="'1'">使用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="addRuleSource.filterMethods == '1' ? true : false"
              >
                <el-form-item prop="filterData">
                  <div class="filterDataClick" @click="filterBtn">
                    *过滤器：
                  </div>
                  <el-select
                    v-model="addRuleSource.filterCode"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in filterList"
                      :key="item.filterId"
                      :label="item.filterName"
                      :value="item.filterId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>

      <!-- 过滤器 -->
    </el-form>
    <!-- 过滤器 -->
    <filterTem
      :editTheData="editTheDataFilter"
      :dialogVisibleFilterProps="dialogVisibleFilter"
      @getDialogVisibleFilter="getDialogVisibleFilter"
    ></filterTem>
    <!-- 所有成员、关系树展示-->
    <div v-if="toShowMemberTree">
      <memberAndTree
        ref="memberAndTree"
        :toShowMemberTree="toShowMemberTree"
        :dictCode="dictCode"
        :indexItems="indexItems"
        :itemData="itemData"
        @selectDataFunc="selectDataFunc"
      ></memberAndTree>
    </div>
  </div>
</template>
<script>
import { ruleDefinition } from "@/api/index";
import { publicManage_dat } from "@/api/index";
// 基本信息
import basicMsg from "@/components/ca/basicMsg.vue";
// 所有成员、关系树
import memberAndTree from "@/components/ca/memberAndTree";
// 过滤器
import filterTem from "@/views/caManage/ruleManage/ruleDriver/filterTem";
export default {
  name: "dataSource",

  props: {
    ruleCode: {
      type: String,
      default: "",
    },
    operateType: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      //######## 操作目标 ######################
      pubPhysicaltableList: [],
      //业务字段选项
      columnList: [],
      //费用类型
      feeTypeList: [
        {
          value: "Z",
          label: "自身费用",
        },
        {
          value: "T",
          label: "摊入费用",
        },
        {
          value: "Q",
          label: "全部费用",
        },
      ],
      //######## 操作目标  完成######################

      //######## 筛选维度  ######################
      //筛选维度
      selectConditionList: [],
      indexItems: 0,
      //选中的值
      itemData: [],
      selectData: [
      ],
      dictCode: "", // 筛选条件的字段值
      filterList: [],

      toShowFilterPage: false,
      toShowMemberTree: false,
      addRuleSource: {
        tableNameEn: "",
        columnEn: "",
        feeType: "",
        filterMethods: "0",
        filterCode: "",
        datafilterId: "",
      },
      addRuleSourceRules: {
        tableNameEn: [
          { required: true, message: "请选择业务表", trigger: "blur" },
        ],
        columnEn: [
          { required: true, message: "请选择业务字段", trigger: "blur" },
        ],
        feeType: [
          { required: true, message: "请选择费用类型", trigger: "blur" },
        ],
        filterMethods: [
          { required: true, message: "请选择过滤类型", trigger: "blur" },
        ],
      },
      //#############过滤器##################
      editTheDataFilter: {},
      dialogVisibleFilter: false,
    };
  },
  components: {
    basicMsg,
    memberAndTree,
    filterTem,
  },
  mounted() {
  },
  watch: {
  },
  methods: {
    //********** 操作目标*************** */
    //物理表改变
    tableNameEnChanges() {
      this.addRuleSource.columnEn = "";
      this.addRuleSource.filterCode = "";
      // 获取字段
      this.getColumn();
      this.getFilterOptions();
      // 获取过滤器下拉框
      this.getFilterList();
      // 给输出内容传值
      this.bus.$emit("addRuleSource", this.addRuleSource);
    },
    //业务字段改变
    pubPhysicalcolumnIdChanges() {
      this.bus.$emit("addRuleSource", this.addRuleSource);
    },

    //********** 筛选维度*************** */
    // 筛选条件  选择按钮
    toSelectTab(item, index) {
      var _self = this;
      this.toShowMemberTree = true;
      this.indexItems = index;
      this.itemData = item.filterValueList.map((v) => {
        return v.filterValue;
      });
      this.itemData = [item.filterValue];
      this.dictCode = item.relatedDimensionCode;
    },
    // 获取维度成员
    selectDataFunc(val) {
      this.toShowMemberTree = false;
      if (val) {
        let params = val;
        console.log(params, "维度成员传输的传输的数据");
        if (params.selectionFlag == "2") {
          let ind = params.index;
          console.log(this.selectConditionList[ind]);
          let val = {
            filterName: params.row.dictItemName,
            filterValue: params.row.dictItemCode     
          }
          this.selectConditionList[ind].filterValueList = []
          let param = {
            filterName: '所有',
            filterValue: ""
          }
          this.selectConditionList[ind].filterValueList.push(param);
          this.selectConditionList[ind].filterValueList.push(val);
          this.selectConditionList[ind].filterValue = params.row.dictItemCode;
          this.selectConditionList[ind].filterName = params.row.dictItemName;
          this.selectConditionList[ind].selectionFlag = "2";
          console.log(
            this.selectConditionList[ind].filterValue,
            this.selectConditionList[ind].filterName
          );
          console.log(this.selectConditionList, "this.selectConditionList");
        }
        if (params.selectionFlag == "1") {
          let ind = params.index;
          let val = {
            filterValue: params.row.id,
            filterName: params.row.name
          };
          this.selectConditionList[ind].filterValueList = []
          let param = {
            filterName: '所有',
            filterValue: ""
          }
          this.selectConditionList[ind].filterValueList.push(param);
          this.selectConditionList[ind].filterValueList.push(val);
          this.selectConditionList[ind].filterValue = params.row.id;
          this.selectConditionList[ind].filterName = params.row.name;
          this.selectConditionList[ind].treeId = params.row.treeCode;
          this.selectConditionList[ind].selectionFlag = "1"; 
        }
      }
    },

    // 清除数据
    clearMsg() {
      this.$nextTick(() => {
        this.$refs.addRuleSource.clearValidate();
      });
      for (let k in this.addRuleSource) {
        this.addRuleSource[k] = "";
      }
      this.addRuleSource.filterMethods = "0";
      this.selectConditionList = [];
      this.filterList = [];
      this.init();
      this.toShowMemberTree = false;
    },

    init() {
      this.getPubPhysicaltableData();
      if (
        this.operateType == "2" ||
        this.operateType == "3" ||
        this.operateType == "5"
      ) {
        this.getRuleBaseDetailToForm();
      }
    },
    // 修改业务表
    tableNameEnChange() {
      // this.addRuleSource.columnEn = ""
      // 获取字段
      this.getColumn();
      this.getFilterOptions();
      // 获取过滤器下拉框
      this.getFilterList();
    },

    //
    getFilterList() {
      let params = {
        tableName: this.addRuleSource.tableNameEn,
      };
      ruleDefinition
        .pubFilterQueryComboForRule(params)
        .then((res) => {
          if (res.code == 200) {
            this.filterList = res.datas;
          } else {
            this.$message.error("过滤器" + res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取动态的筛选条件
    getFilterOptions() {
      let params = {
        // relatedDimensionCode: this.ruleCode,
        isShow: "1",
        isTemplate: "0",
        tableNameEn: this.addRuleSource.tableNameEn,
      };
      ruleDefinition
        .queryDimColumn(params)
        .then((res) => {
          if (res.code == 200) {
            this.selectConditionList = res.datas;

            if (this.selectConditionList.length >= 1) {
              for (let i = 0; i < this.selectConditionList.length; i++) {
                this.$set(this.selectConditionList[i], "filterValue", "");
                this.$set(this.selectConditionList[i], "treeId", "");
                this.$set(this.selectConditionList[i], "selectionFlag", "-");
                this.$set(this.selectConditionList[i], "filterName", "所有");

                this.selectConditionList[i].selectionFlag = "-";
                this.selectConditionList[i].treeId = "";
                this.selectConditionList[i].filterValue = "";

                this.selectConditionList[i].filterValueList = [
                  {
                    filterValue: "",
                    filterName: "所有",
                  },
                ];
              }
              if (this.operateType && this.operateType != "1") {
                // 编辑查看复制获取回显的值
                this.getRuleBaseDetailGetDataFilter();
              }
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取业务字段
    getColumn() {
      let params = {
        isShow: "1",
        isTemplate: "0",
        tableNameEn: this.addRuleSource.tableNameEn,
      };
      ruleDefinition
        .queryListCa(params)
        .then((res) => {
          if (res.code == 200) {
            this.columnList = res.datas;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //编辑时数据回显
    getRuleBaseDetailToForm() {
      let params = {
        ruleCode: this.ruleCode,
        elementType: "1", // 数据来源
      };
      ruleDefinition
        .ruleBaseDetailToForm(params)
        .then((res) => {
          if (res.code == 200) {
            this.addRuleSource.feeType = res.data.feeType; // 费用
            this.addRuleSource.columnEn = res.data.pubPhysicalcolumnId; // 字段
            this.addRuleSource.tableNameEn = res.data.pubPhysicaltableId; // 数据表
            this.addRuleSource.datafilterId = res.data.datafilterId; // 标示
            this.addRuleSource.filterMethods = res.data.filterType; // 是否使用过滤器
            this.addRuleSource.filterCode = res.data.filterId; // 是否使用过滤器

            this.bus.$emit("addRuleSource", this.addRuleSource);
            // 获取筛选条件
            if (this.addRuleSource.tableNameEn) {
              this.tableNameEnChange();
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑查看复制 获取筛选条件动态选择框信息
    getRuleBaseDetailGetDataFilter() {
      let params = {
        datafilterId: this.addRuleSource.datafilterId,
      };
      ruleDefinition
        .ruleBaseDetailGetDataFilter(params)
        .then((res) => {
          if (res.code === 200) {
            this.selectData = res.datas;
            if (this.selectData.length) {
              for (let i = 0; i < this.selectData.length; i++) {
                for (let t = 0; t < this.selectConditionList.length; t++) {
                  if (
                    this.selectConditionList[t].columnEn ==
                    this.selectData[i].dimValue
                  ) {
                    // 树结构加@@@
                    if (this.selectData[i].selectionFlag == "1") {
                      this.selectConditionList[t].filterValue =
                        this.selectData[i].filterValue +
                        "@@@" +
                        this.selectData[i].treeId;
                    } else {
                      this.selectConditionList[t].filterValue = this.selectData[
                        i
                      ].filterValue;
                    }
                    this.selectConditionList[t].filterName = this.selectData[
                      i
                    ].filterName;
                    this.selectConditionList[t].selectionFlag = this.selectData[
                      i
                    ].selectionFlag;
                    this.selectConditionList[t].treeId = this.selectData[
                      i
                    ].treeId;
                    //
                    this.selectConditionList[t].filterValueList = []
                    let val  ={
                      filterName: this.selectConditionList[t].filterName,
                      filterValue: this.selectConditionList[t].filterValue
                    }
                    let param = {
                        filterName: '所有',
                        filterValue: ""
                      }
                    this.selectConditionList[t].filterValueList.push(param);
                    this.selectConditionList[t].filterValueList.push(val);

                    //
                    console.log(
                      this.selectConditionList[t].filterName,
                      this.selectConditionList[t].filterValue
                    );
                  
                  }
                  this.$forceUpdate();
                  console.log(
                    this.selectConditionList[t],
                    "selectConditionList[t]"
                  );
                }
              }
            }
            console.log(this.selectConditionList, "selectConditionList");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getPubPhysicaltableData() {
      let params = {
        ruleType: "0",
      };
      ruleDefinition
        .qeuryListForRule(params)
        .then((res) => {
          if (res.code == 200) {
            this.pubPhysicaltableList = res.datas;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
    initShow() {},
    // 过滤器
    filterTypeChange(val) {
      if (val == "1") {
        //下拉框筛选值
        this.getFilterDataSelects();
      }
    },
    //获取过滤器下拉框的值
    getFilterDataSelects() {
      //获取物理表的的过滤器的值
      let params = {
        tableName: this.addRuleSource.tableNameEn,
      };
      ruleDefinition
        .pubFilterQueryComboForRule(params)
        .then((res) => {
          if (res.code == 200) {
            this.filterList = res.datas;
          } else {
            this.$message.error("过滤器" + res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //过滤器点击查看事件
    filterBtn() {
      if (!this.addRuleSource.filterCode) {
        this.$message.warning("请选择过滤器");
        return;
      }
      //获取过滤器数据
      let params = {
        id: this.addRuleSource.filterCode,
      };
      publicManage_dat
        .pubFilterFindById(params)
        .then((res) => {
          if (res.code == 200 && res.data) {
            this.dialogVisibleFilter = true;
            this.editTheDataFilter = res.data;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //弹框展示值
    getDialogVisibleFilter(val) {
      this.dialogVisibleFilter = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.filterDataClick {
  float: left;
  color: blue;
  font-size: 12px;
  text-decoration: underline;
  margin-right: 10px;
  cursor: pointer;
}
</style>
